<!-- 邀请组件 -->
<template>
  <a-modal
    :visible="modalVisible"
    title="邀请成员"
    :footer="null"
    @cancel="handleCancel">
    <a-form :label-col="labelCol" :wrapper-col="wrapperCol" :model="formData">
      <a-form-item label="手机号">
        <a-input v-model="phoneValue" @change="e => handleInputChange(e.target.value)" placeholder="请输入手机号" />
      </a-form-item>
      <a-form-item label="账号">
        <a-input v-model="formData.account" disabled width="100%"/>
      </a-form-item>
      <a-form-item label="用户">
        <a-input v-model="formData.name" disabled width="100%"/>
      </a-form-item>
      <a-form-item label="组织机构">
        <a-input v-model="formData.orgName" disabled width="100%"/>
      </a-form-item>
      <a-form-item label="组织机构内单位">
        <a-input v-model="formData.deptName" disabled width="100%"/>
      </a-form-item>
      <a-form-item label="角色">
        <!-- 由于需要vue先判断formData.roleList是否存在才会解析roleList.name,故需先判断roleList是否存在，否则报错 -->
        <a-input v-if="formData.roleList" v-model="formData.roleList.name" disabled width="100%"/>
        <a-input v-else disabled width="100%"/>
      </a-form-item>
      <a-row :gutter="48">
        <a-col :md="24" :sm="24">
          <a-button type="primary" @click="handleInvitation" style="float: right" :disabled="isSend">发送邀请</a-button>
        </a-col>
      </a-row>
    </a-form>
  </a-modal>
</template>

<script>
import { getAdminMessage, sendInvitation } from '@/api/common'
export default {
  props: {
    projectId: { // 项目Id
      type: [String, Number],
      default: null
    },
    invitedType: { // 被邀请人类型
      type: Number,
      default: null
    }
  },
  data () {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 }
      },
      phoneValue: null,
      isSend: true,
      modalVisible: false,
      formData: {}
    }
  },
  methods: {
    // 手机号码输入框改变
    handleInputChange (value) {
      if (value.length === 11) {
        this.isSend = false // 此行不需要，信息返回成功后有就行了 方便调试暂时先留着
        // 请求接口
        getAdminMessage({ phone: value })
          .then(res => {
            console.log(res, '通过手机号获取的用户信息')
            this.formData = res
            this.isSend = false
          })
          .catch(() => {})
      } else {
        this.isSend = true
        this.formData = {}
      }
    },
    // 点击发送邀请
    handleInvitation () {
      if (!this.formData || !this.formData.account) {
        // this.$message.warning('手机号错误，请校验')
        this.$message.warning('未找到与此手机号相关的信息，请校验号码是否正确')
        return false
      }
      const invitationData = {}
      invitationData.proId = this.projectId // 父组件传过来的项目id
      invitationData.type = this.invitedType // 父组件传来的被邀请人类型
      invitationData.phone = this.phoneValue // 输入的电话号码
      invitationData.invitedUserId = this.formData.userId // 根据电话号码获取的被邀请人id
      sendInvitation(invitationData)
        .then(res => {
          // 成功发送邀请后，通知父组件刷新列表
          this.$emit('sendData')
          this.$message.success('发送成功')
          this.modalVisible = !this.modalVisible
        })
        .catch(() => {})
    },
    // 点击取消对话框消失
    handleCancel () {
      this.modalVisible = !this.modalVisible
    },
    // 关闭/显示对话框，重置数据
    toggleModal () {
      this.modalVisible = !this.modalVisible
      this.phoneValue = null
    }
  }
}
</script>
<style scoped lang="scss">

</style>
